<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>对对碰</title>
    <link rel="stylesheet" type="text/css" href="../addons/jy_h5game/resource/xianchang/css/basic.css">
	
	<link rel="stylesheet" href="../addons/jy_h5game/resource/xianchang/css/screen_lottory_free.css" type="text/css">
	<link rel="stylesheet" href="../addons/jy_h5game/resource/xianchang/css/spinners.css" type="text/css">
	<script src="../addons/jy_h5game/resource/xianchang/js/tool.js" type="text/javascript" charset="utf-8"></script>
    
	
		  

</head>

   <style>
::-webkit-scrollbar-track-piece {
 background-color: rgba(0,0,0,0.6);
 border:0;border-radius: 8px;
}
::-webkit-scrollbar {
 width: 8px;
 height: 8px;
 border:0;border-radius: 8px;
}
::-webkit-scrollbar-thumb {
 background-color: #ccc;
 background-clip: padding-box;
 min-height: 28px;
 border:0;border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
 background-color: #fb82af;
 border:0;border-radius: 8px;
}
/**/
.none, .ne, .no {
display: none;
margin: 0;
}
.member-list {height: 70%;}
.ddp { height: 100%;width: 100%; overflow: hidden;box-sizing: border-box; position:relative;border-radius: 10px;background-color: rgba(0, 0, 0, 0.15);}
.ddp .ddp_list{overflow: auto; position:absolute; top:15px; left:0; right:0; bottom:160px;margin: 0;padding: 0; }
.ddp .dibu{position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 160px;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.15);}
.ddp_list li {
float: left;
width: 33.3%;
height: 50%;
overflow: hidden;
list-style: none;
position: relative;
display:none;
}
@media only screen and (min-width: 1359px) {
.ddp_list li{width: 25%;}
}
@media only screen and (min-width: 1900px) {
.ddp_list li{width: 20%;}
}
.ddp_list li .libg {
position: absolute;
z-index: 1;
height: 180px;
top: 0;
left: 50%;
margin-left: -102px;
}

.ddp_list li dl {
margin: 0 auto;
width: 290px;
height: 180px;
list-style: none;
overflow: hidden;
z-index: 2;
}

.ddp_list li dl dt {
float: left;
width: 140px;
height: 140px;
list-style:none;position: relative;opacity:0;
}
dt.xl {
}
dt.xr {
margin-left: 10px;
}
.ddp_list li dl dt img {
width: 140px;
height: 140px;
border-radius: 128px;
overflow: hidden;
}
.ddp_list pre, .ddp_list bdo {
height: 60px;
width: 60px;
padding: 0;
margin: 0;
position: absolute;
right: 0;
bottom: 0;
display: block;
quotes: none;
}
pre {
background: url(../addons/jy_h5game/resource/xianchang/images/ddp/sex_float_man.png);background-size:100% auto;
}
bdo {
background: url(../addons/jy_h5game/resource/xianchang/images/ddp/sex_float_ms.png);background-size:100% auto;
left: 0;
}
.ddp_list pre {
-webkit-transform: rotate(90deg); 
}
.ddp_list bdo {
-webkit-transform: rotate(-90deg);
}
.ddp_kind_show pre, .ddp_kind_show bdo {
height: 60px;
width: 60px;
padding: 0;
margin: 0;
position: absolute;
right: 0;
top: 0;
display: block;
quotes: none;
}
.ddp_kind_show pre {
}
.ddp_kind_show bdo {

}
.ddp_list li dl dt p {
text-align: center;
width: 140px;
height: 30px;
overflow: hidden;
vertical-align: middle;
line-height: 30px;
text-shadow: none;
color: #FFF;
margin: 0;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.ddp_list li #num, .ddp_list li #num_not {
width: 42px;
height: 42px;
font-size: 18px;
line-height:36px;
text-align: center;
background: url(../addons/jy_h5game/resource/xianchang/images/ddp/xin.png) no-repeat;
background-size: 100% auto;
position: absolute;
top: 0;
left: 50%;
margin-left: -21px;
color:#FFF; opacity:0;
}
.font20 {
font-size: 20px; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ddp_list li.view { display:block}
.view #num{-webkit-animation:mm01 1.5s 0s ease forwards; -moz-animation:1.5s 0s ease forwards ;}
.view dl .xl{-webkit-animation:mm02 1s 1.2s ease forwards; -moz-animation:1s 1.2s ease forwards ;}
.view dl .xr{-webkit-animation:mm03 1s 1.5s ease forwards; -moz-animation:1s 1.5s ease forwards ;}
.view dl .xl img{-webkit-animation:mm04 2s 1.2s ease forwards; -moz-animation:2s 1.2s ease forwards ;}
.view dl .xr img{-webkit-animation:mm05 2s 1.5s ease forwards; -moz-animation:2s 1.5s ease forwards ;}


@-webkit-keyframes mm01{
0%{ opacity:0;margin-left: 0;width:0; height:0 }
50%{opacity:0.8;margin-left: -102px;width: 205px; height:180px;font-size: 60px;line-height: 180px;}
100%{opacity:1;margin-left: -21px;width: 42px; height:37px}
}
@-webkit-keyframes mm02{
0%{ opacity:0; -webkit-transform: scale(0) translateX(0)}
90%{ opacity:1; -webkit-transform: scale(1) translateX(10px)}
100%{opacity:1;-webkit-transform: scale(1) translateX(0)}
}
@-webkit-keyframes mm03{
0%{ opacity:0; -webkit-transform: scale(0) translateX(0)}
90%{ opacity:1; -webkit-transform: scale(1) translateX(-10px)}
100%{opacity:1;-webkit-transform: scale(1) translateX(0)}
}
@-webkit-keyframes mm04{
0%{ -webkit-transform:rotate(0)}
100%{-webkit-transform:rotate(360deg)}
}
@-webkit-keyframes mm05{
0%{ -webkit-transform:rotate(0)}
100%{-webkit-transform:rotate(-360deg)}
}
@-webkit-keyframes mm06{
0%{ -webkit-transform:rotate(360deg)}
100%{-webkit-transform:rotate(720deg)}
}
@-webkit-keyframes mm07{
0%{ -webkit-transform:rotate(-360deg)}
100%{-webkit-transform:rotate(-720deg)}
}
/**/
.ddp_kind_show{width: 922px;
margin: 0 auto;
height: 100%;
overflow: hidden;
text-align: center; border-radius:10px;}
.ddp_kind_show dl{ width:400px; height:106px;margin: 0; position:relative;}
.ddp_kind_show dl dt{width:106px; height:106px; overflow:hidden;}
.ddp_kind_show dl dt img{ width:106px; height:106px; border-radius:106px;}
.ddp_kind_show dl dd{width: 300px;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 110px;
position: absolute;
top: 0;
font-size: 36px;
color: #fff;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);}
.ddp_kind_show .ddp_kind_man{ float:left; width:400px; height:106px; overflow:hidden; text-align:right;}
.ddp_kind_show .ddp_kind_man dt{ float:right; position:relative;}
.ddp_kind_show .ddp_kind_man dd{ right: 120px;}
.ddp_kind_show .ddp_kind_ms{ float:right; width:400px; height:106px; overflow:hidden; text-align:left;}
.ddp_kind_show .ddp_kind_ms dl{}
.ddp_kind_show .ddp_kind_ms dt{ float:left; position:relative;}
.ddp_kind_show .ddp_kind_ms dd{ left: 120px;}
.ddp_count{ }
.ddp_count td, .ddp_count th{ font-size:16px; font-weight:normal; line-height:14px; color:#FFF;text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;}
.ddp_count_left{ padding-right:12px; text-align:right; font-size:12px; font-weight:normal; line-height:14px; }
.ddp_count_right{ padding-left:12px; text-align:left; font-size:12px; font-weight:normal; line-height:14px; }
.ddp_kind_show #ddp_kind_button{float: left;
margin: 0 10px;
width: 100px;
height: 100px;
overflow: hidden;
line-height: 90px;
background: #ff8686;
border-radius: 10px;
text-align: center;
vertical-align: middle;
font-size: 50px;
font-weight: bold;
color: #ffffff;
cursor:pointer;box-shadow: 0 1px 5px rgba(0, 0, 0, 0.32),0 -5px 0px 0px rgba(214, 88, 88, 1) inset;
}
.ddp_kind_show #ddp_kind_button:hover{
background: #FF7676;
}
.ddp_kind_show #ddp_kind_button:active{
border:0;box-shadow:0 1px 5px rgba(0, 0, 0, 0.32),0 0 10px rgba(0, 0, 0, 0.52) inset;line-height: 100px; 
}
.ddp_count_button{-webkit-border-radius:0;-webkit-appearance:none;outline: none; cursor:pointer; display:inline-block;width: 95%;
height:30px; line-height:25px;
background-color: #f9f9f9;
background: #fff;
color: #000;
border:0;border-radius: 3px;font-size: 12px;box-shadow: 0 1px 5px rgba(0, 0, 0, 0.32),0 -4px 0px 0px #ccc inset;
}
.ddp_count_button:hover{background: #ff8686;box-shadow:0 1px 5px rgba(0, 0, 0, 0.32),0 -4px 0px 0px rgba(214, 88, 88, 1) inset;}
.ddp_count_button:active{border:0;box-shadow:0 1px 5px rgba(0, 0, 0, 0.32),0 0 10px rgba(0, 0, 0, 0.52) inset;}

.ddp_list li:hover .closeico{ display:block;}
.closeico{
position: absolute;
display: block;
width: 30px;
height: 30px;
top: 43px;
left: 50%;
margin-left: -15px;
background: #000;
border-radius: 50%;
text-indent: -9999px;
z-index: 3;
cursor: pointer;
display:none;
}

.closeico:before {
position: absolute;
top: 5px;
left: 14px;
content: "";
display: block;
width: 2px;
height: 20px;
background: #FFFFFF;-webkit-transform: rotate(45deg);
}
.closeico:after {
position: absolute;
top: 14px;
left: 5px;
content: "";
display: block;
width: 20px;
height: 2px;
background: #FFFFFF;-webkit-transform: rotate(45deg);
}
.closeico:hover{
background: #fff;
}
.closeico:hover:before{
background: #fb82af;
}
.closeico:hover:after{
background: #fb82af;
}

/**/
.xinhua{ display:none}
.xinhua.view{ display: block}
.xinhua img{position: absolute;bottom:140px;;left: 50%;margin-left: -5px;width: 10px; }
.xinhua .x001{-webkit-animation:x001 2s 0s ease-in infinite; -moz-animation:2s 0s ease-in infinite ;}
.xinhua .x002{-webkit-animation:x002 2s 0.5s ease-in infinite; -moz-animation:2s 0.5s ease-in infinite ;}
.xinhua .x003{-webkit-animation:x003 2s 1s ease-in infinite; -moz-animation:2s 1s ease-in infinite ;}
.xinhua .x004{-webkit-animation:x004 2s 1.5s ease-in infinite; -moz-animation:2s 1.5s ease-in infinite ;}
.xinhua .x005{-webkit-animation:x005 2s 2s ease-in infinite; -moz-animation:2s 2s ease-in infinite ;}
.xinhua .x006{-webkit-animation:x006 2s 2.5s ease-in infinite; -moz-animation:2s 2.5s ease-in infinite ;}
@-webkit-keyframes x001{
0%{ -webkit-transform: translate(0,0)  scale(1);opacity:1; }
100%{-webkit-transform:  translate(100px,-160px) scale(10) rotate(60deg);opacity:0;}
}
@-webkit-keyframes x002{
0%{ -webkit-transform: translate(0,0)  scale(1);opacity:1; }
100%{-webkit-transform:  translate(0,-180px) scale(10) rotate(-60deg);opacity:0;}
}
@-webkit-keyframes x003{
0%{ -webkit-transform: translate(0,0)  scale(1);opacity:1; }
100%{-webkit-transform:  translate(-100px,-170px) scale(10) rotate(-30deg);opacity:0;}
}
@-webkit-keyframes x004{
0%{ -webkit-transform: translate(0,0)  scale(1);opacity:1; }
100%{-webkit-transform:  translate(160px,-180px) scale(10) rotate(-40deg);opacity:0;}
}
@-webkit-keyframes x005{
0%{ -webkit-transform: translate(0,0)  scale(1);opacity:1; }
100%{-webkit-transform:  translate(0px,-190px) scale(10) rotate(-40deg);opacity:0;}
}
@-webkit-keyframes x006{
0%{ -webkit-transform: translate(0,0)  scale(1);opacity:1; }
100%{-webkit-transform:  translate(-160px,-140px) scale(10) rotate(-30deg);opacity:0;}
}



	body {background: url(../addons/jy_h5game/resource/xianchang/style/all/035d.jpg) #000;background-size: cover;}

</style> 
<div class="Panel Lottery" style="display: block; opacity: 1;" >
   
    <div class="ddp" id="ddd">
    <div id="ddp_list">
            <ul class="ddp_list">
				
				<li ng-repeat="(k,v) in pagedata.list" class="view"><dl><dt class="xl"><img src="{{v.mavatar}}" title="{{v.mnickname}}"><pre></pre><p class="font20">{{v.mnickname}}</p></dt><dt class="xr"><img src="{{v.wavatar}}" title="{{v.wnickname}}"><bdo></bdo><p class="font20">{{v.wnickname}}</p></dt></dl><div id="num">{{k}}</div></li>
				
                <p class="cl"></p>
            </ul>
            </div>
            
            
    <div class="dibu">
    
   
    
    <div class="ddp_kind_show">
            	<div class="ddp_kind_man">
                	<dl><dt><img  id='img2' src="../addons/jy_h5game/resource/xianchang/images/ddp/cj_def.gif" /><pre></pre></dt><dd>{{pagedata.m.name}}</dd></dd></dl>
                </div>
				<div ng-show="pagedata.show==1" id="ddp_kind_button" ng-click="stop()">停</div>
                <div ng-show="pagedata.show!=1" id="ddp_kind_button" ng-click="cj()">碰</div>
            	<div class="ddp_kind_ms">
                	<dl><dt><img id='img' src="../addons/jy_h5game/resource/xianchang/images/ddp/cj_def.gif" /><bdo></bdo></dt><dd>{{pagedata.w.name}}</dd></dd></dl>
                </div>
                <table width="922" height="36" border="0" cellspacing="0" cellpadding="0" class="ddp_count">
                  <tbody><tr>
                    <th width="400" class="ddp_count_left">左池：{{pagedata.mcount}} 人</th>
                  <!--  <td width="102" align="center" ><input type="button" class="ddp_count_button" ng-click="re()" value="下一轮"></td> -->
                    <td width="400" class="ddp_count_right">右池：{{pagedata.wcount}} 人</td>
                  </tr>
                </tbody></table>
            </div>
    
     </div>
    
    <div id="xinhua" class="xinhua view">
                <img class="x001" src="../addons/jy_h5game/resource/xianchang/images/ddp/xin.png">
                <img class="x002" src="../addons/jy_h5game/resource/xianchang/images/ddp/xin.png">
                <img class="x003" src="../addons/jy_h5game/resource/xianchang/images/ddp/xin.png">
                <img class="x004" src="../addons/jy_h5game/resource/xianchang/images/ddp/xin.png">
                <img class="x005" src="../addons/jy_h5game/resource/xianchang/images/ddp/xin.png">
                <img class="x006" src="../addons/jy_h5game/resource/xianchang/images/ddp/xin.png">
    </div>
  </div>
  </div>
<link rel="stylesheet" type="text/css" href="../addons/jy_h5game/resource/xianchang/css/footer.css">


<script type="text/javascript">
	var params = {
					'plugin':'jy_h5game',
					'action':'post_data',
					'op':'ddp',
					'data':{
						
					},
					'callback':function(data){
								 window.scope.pagedata.list=data.list;
								 window.scope.pagedata.woman=data.woman;
								 window.scope.pagedata.man=data.man;
								 window.scope.pagedata.wcount=data.wcount;
								 window.scope.pagedata.mcount=data.mcount;
								 scope.$apply();
							;
					}
		}
		scope.post_json(params);
		var w=0;
		var m=0;
scope.cj = function(){
	if( window.scope.pagedata.wcount>0 &&  window.scope.pagedata.mcount>0){	// 奖池中有人
		//$("#ddp_kind_button").text("停");
		scope.pagedata.show=1;
		scope.init();
		
	}else{	// 奖池为空
		alert("对对碰池为空！");
	}
}
scope.stop = function(){
	scope.pagedata.status=1;
	return;
}
scope.init = function(){
	if(w==scope.pagedata.wcount){
		w=0;
	}
	if(m==scope.pagedata.mcount){
		m=0;
	}
if(scope.pagedata.status==1){
	var nan = parseInt(Math.random()*scope.pagedata.mcount);
	var nv = parseInt(Math.random()*scope.pagedata.wcount);
	scope.pagedata.w=scope.pagedata.woman[nv];
	scope.pagedata.m=scope.pagedata.man[nan];
	document.all.img.src= scope.pagedata.w.headImg;
	document.all.img2.src= scope.pagedata.m.headImg;
	scope.pagedata.status=0;
	scope.pagedata.show=0;
	scope.pagedata.woman.splice(nv,1);
	scope.pagedata.man.splice(nan,1);
	scope.pagedata.mcount=scope.pagedata.mcount-1;
	scope.pagedata.wcount=scope.pagedata.wcount-1;
	scope.$apply();
	var params = {
					'plugin':'jy_h5game',
					'action':'post_data',
					'op':'ddp2',
					'data':{
						mid:scope.pagedata.m.id,
						wid:scope.pagedata.w.id
					},
					'callback':function(data){
						scope.pagedata.list[data]={mavatar:scope.pagedata.m.headImg,mnickname:scope.pagedata.m.name,wavatar:scope.pagedata.w.headImg,wnickname:scope.pagedata.w.name};
						scope.$apply();
					}
		}
		scope.post_json(params);
		return;
		}
	$(".ddp_kind").addClass('ddp_kind_show');
	setTimeout(function(){
		scope.pagedata.w=scope.pagedata.woman[w];
		scope.pagedata.m=scope.pagedata.man[m];
		document.all.img.src= scope.pagedata.w.headImg;
		w++;
		document.all.img2.src= scope.pagedata.m.headImg;
		m++;
		scope.$apply();
		scope.init(0);
		
　　},200);
}
</script>
</html>